<!DOCTYPE html>
<html lang="en"><head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1"><!-- Begin Jekyll SEO tag v2.8.0 -->
<title>0004: OOP Buttons, with and without Arguments | gtkDcoding</title>
<meta name="generator" content="Jekyll v4.3.4" />
<meta property="og:title" content="0004: OOP Buttons, with and without Arguments" />
<meta name="author" content="Ron Tarrant" />
<meta property="og:locale" content="en_US" />
<meta name="description" content="Adding a GTK Button to the TestRig window and sending arguments to callbacks - OOP version - a D language tutorial." />
<meta property="og:description" content="Adding a GTK Button to the TestRig window and sending arguments to callbacks - OOP version - a D language tutorial." />
<link rel="canonical" href="http://localhost:4000/posts/0004-oop-button.html" />
<meta property="og:url" content="http://localhost:4000/posts/0004-oop-button.html" />
<meta property="og:site_name" content="gtkDcoding" />
<meta property="og:type" content="article" />
<meta property="article:published_time" content="2019-01-25T00:00:00-05:00" />
<meta name="twitter:card" content="summary" />
<meta property="twitter:title" content="0004: OOP Buttons, with and without Arguments" />
<script type="application/ld+json">
{"@context":"https://schema.org","@type":"BlogPosting","author":{"@type":"Person","name":"Ron Tarrant"},"dateModified":"2019-01-25T00:00:00-05:00","datePublished":"2019-01-25T00:00:00-05:00","description":"Adding a GTK Button to the TestRig window and sending arguments to callbacks - OOP version - a D language tutorial.","headline":"0004: OOP Buttons, with and without Arguments","mainEntityOfPage":{"@type":"WebPage","@id":"http://localhost:4000/posts/0004-oop-button.html"},"url":"http://localhost:4000/posts/0004-oop-button.html"}</script>
<!-- End Jekyll SEO tag -->
<link rel="stylesheet" href="../assets/main.css">
  <link rel="stylesheet" href="../css/style.css" /><link type="application/atom+xml" rel="alternate" href="http://localhost:4000/feed.xml" title="gtkDcoding" /></head>
<body><header class="site-header" role="banner">

  <div class="wrapper"><a class="site-title" rel="author" href="../">gtkDcoding</a><nav class="site-nav">
        <input type="checkbox" id="nav-trigger" class="nav-trigger" />
        <label for="nav-trigger">
          <span class="menu-icon">
            <svg viewBox="0 0 18 15" width="18px" height="15px">
              <path d="M18,1.484c0,0.82-0.665,1.484-1.484,1.484H1.484C0.665,2.969,0,2.304,0,1.484l0,0C0,0.665,0.665,0,1.484,0 h15.032C17.335,0,18,0.665,18,1.484L18,1.484z M18,7.516C18,8.335,17.335,9,16.516,9H1.484C0.665,9,0,8.335,0,7.516l0,0 c0-0.82,0.665-1.484,1.484-1.484h15.032C17.335,6.031,18,6.696,18,7.516L18,7.516z M18,13.516C18,14.335,17.335,15,16.516,15H1.484 C0.665,15,0,14.335,0,13.516l0,0c0-0.82,0.665-1.483,1.484-1.483h15.032C17.335,12.031,18,12.695,18,13.516L18,13.516z"/>
            </svg>
          </span>
        </label>

        <div class="trigger"><a class="page-link" href="../about.html">About</a><a class="page-link" href="../index-reverse.html">Posts in Date Order</a><a class="page-link" href="../topics.html">Blog Posts by Topic</a></div>
      </nav></div>
</header>
<main class="page-content" aria-label="Content">
      <div class="wrapper">
        <article class="post h-entry" itemscope itemtype="http://schema.org/BlogPosting">
	<header class="post-header">
		<link rel="stylesheet" href="../css/font_size.css" />
		<link rel="stylesheet" href="../css/figure.css" />
		<link rel="stylesheet" href="../css/topics/button.css" />  <!-- sub in the tag/topic -->
		<link rel="stylesheet" href="../css/modal.css" />
		<link rel="stylesheet" href="../css/post.css" />
		<link rel="stylesheet" href="../css/mascot_effects.css" />

		
		
		<p class="post-meta">
		<time class="dt-published" datetime="2019-01-25T00:00:00-05:00" itemprop="datePublished">Friday, January 25, 2019
		</time>• by <span itemprop="author" itemscope itemtype="http://schema.org/Person"><span class="p-author h-card" itemprop="name">Ron Tarrant</span></span></p>
	</header>

	<div class="post-content e-content" itemprop="articleBody">
		<div class="skew-line"></div>
		<h1 id="0004-oop-buttons-with-and-without-arguments">0004: OOP Buttons, with and without Arguments</h1>

<p>NB: In any given example file, to find the code that’s new since the previous example, look for a comment like this:</p>

<div class="language-d highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="c1">// *** NEW ***</span>
</code></pre></div></div>

<p>This time around, the companion code is <a href="https://github.com/rontarrant/gtkd_demos/blob/master/002_button/button_03_oop_noargs.d">here</a> and <a href="https://github.com/rontarrant/gtkd_demos/blob/master/002_button/button_04_oop_arg.d">here</a>.</p>

<p>I’ve defined two classes in this example. The first one, <code class="language-plaintext highlighter-rouge">TestRigWindow</code>, you’ve already seen in the OOP version of the base code file. The second one, we’ll talk about in a moment.</p>

<h2 id="general-principles-of-oop">General Principles of OOP</h2>

<p>Not all of them; that would be far beyond the scope of this blog post (or the blog in its entirety) so I’ll just say this…</p>

<p>OOP is about code organization. It’s about cutting back on bugs or at least having a better idea of where to look for them. No system of this kind is perfect, but that’s life. A class is meant to encapsulate specific data as well as any functions that act upon that data. The point is to protect the data from outside influences that might screw things up.</p>

<p>With that in mind, let’s look at the new class.</p>

<h2 id="the-mybutton-class">The MyButton Class</h2>

<div class="screenshot-frame">
	<div class="frame-header">
		Results of this example:
	</div>
	<div class="frame-screenshot">
		<figure>
			<img id="img0" src="../images/screenshots/002_button/button_03.png" alt="Current example output" />	<!-- img# -->
			
			<!-- Modal for screenshot -->
			<div id="modal0" class="modal">																								<!-- modal# -->
				<span class="close0">&times;</span>																					<!-- close# -->
				<img class="modal-content" id="img00" />																					<!-- img## -->
				<div id="caption"></div>
			</div>
			
			<script>
			// Get the modal
			var modal = document.getElementById("modal0");																			// modal#
			
			// Get the image and insert it inside the modal - use its "alt" text as a caption
			var img = document.getElementById("img0");																				// img#
			var modalImg = document.getElementById("img00");																		// img##
			var captionText = document.getElementById("caption");

			img.onclick = function()
			{
			  modal.style.display = "block";
			  modalImg.src = this.src;
			  captionText.innerHTML = this.alt;
			}
			
			// Get the <span> element that closes the modal
			var span = document.getElementsByClassName("close0")[0];															// close#
			
			// When the user clicks on <span> (x), close the modal
			span.onclick = function()
			{ 
				modal.style.display = "none";
			}
			</script>
			<figcaption>
			Current example output
			</figcaption>
		</figure>
	</div>

	<div class="frame-terminal">
		<figure class="right">
			<img id="img1" src="../images/screenshots/002_button/button_03_term.png" alt="Current example terminal output" /> <!-- img#, filename -->

			<!-- Modal for terminal shot -->
			<div id="modal1" class="modal">																												<!-- modal# -->
				<span class="close1">&times;</span>																										<!-- close# -->
				<img class="modal-content" id="img11" />																									<!-- img## -->
				<div id="caption"></div>
			</div>
			
			<script>
			// Get the modal
			var modal = document.getElementById("modal1");																							// modal#
			
			// Get the image and insert it inside the modal - use its "alt" text as a caption
			var img = document.getElementById("img1");																								// img#
			var modalImg = document.getElementById("img11");																						// img##
			var captionText = document.getElementById("caption");

			img.onclick = function()
			{
			  modal.style.display = "block";
			  modalImg.src = this.src;
			  captionText.innerHTML = this.alt;
			}
			
			// Get the <span> element that closes the modal
			var span = document.getElementsByClassName("close1")[0];																				// close#
			
			// When the user clicks on <span> (x), close the modal
			span.onclick = function()
			{ 
				modal.style.display = "none";
			}
			</script>

			<figcaption>
				Current example terminal output (click for enlarged view)
			</figcaption>
		</figure>
	</div>

	<div class="frame-footer">																																<!-- filename (below)-->
		The code file for this example is available <a href="https://github.com/rontarrant/gtkd_demos/blob/master/002_button/button_03_oop_noargs.d" target="_blank">here</a>.
	</div>
</div>

<p>And here it is:</p>

<div class="language-d highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="k">class</span> <span class="n">MyButton</span> <span class="p">:</span> <span class="n">Button</span>
<span class="p">{</span>
	<span class="nb">string</span> <span class="n">labelText</span> <span class="p">=</span> <span class="s">"Click this"</span><span class="p">;</span>

	<span class="k">this</span><span class="p">()</span>
	<span class="p">{</span>
		<span class="k">super</span><span class="p">(</span><span class="n">label</span><span class="p">);</span>
		<span class="n">addOnClicked</span><span class="p">(&amp;</span><span class="n">buttonAction</span><span class="p">);</span>
		
	<span class="p">}</span> <span class="c1">// this()</span>
	
	
	<span class="kt">void</span> <span class="n">buttonAction</span><span class="p">(</span><span class="n">Button</span> <span class="n">b</span><span class="p">)</span>
	<span class="p">{</span>
		<span class="n">writeln</span><span class="p">(</span><span class="s">"Action taken."</span><span class="p">);</span>
		
	<span class="p">}</span> <span class="c1">// buttonAction()</span>
	
<span class="p">}</span> <span class="c1">// class MyButton</span>
</code></pre></div></div>

<p><code class="language-plaintext highlighter-rouge">MyButton</code> isn’t the name I’d use for production. It would be more descriptive of the data/actions involved, but for this example, it’ll do.</p>

<p>Since we don’t have any data, we only need to encapsulate actions and a constructor. All the constructor does is call its parent class while passing along its label text, and then hook up the signal we’re going to track for this button.</p>

<p>The other function, <code class="language-plaintext highlighter-rouge">buttonAction()</code> stands in for whatever function might work on whatever data we might use… if we had data. All it does is write a line to the shell so we know it’s there and working.</p>

<h2 id="but-if-we-pass-an-argument">But if We Pass an Argument…</h2>

<div class="screenshot-frame">
	<div class="frame-header">
		Results of this example:
	</div>
	<div class="frame-screenshot">
		<figure>
			<img id="img2" src="../images/screenshots/002_button/button_04.png" alt="Current example output" />							<!-- img# -->
			
			<!-- Modal for screenshot -->
			<div id="modal2" class="modal">																								<!-- modal# -->
				<span class="close2">&times;</span>																					<!-- close# -->
				<img class="modal-content" id="img22" />																					<!-- img## -->
				<div id="caption"></div>
			</div>
			
			<script>
			// Get the modal
			var modal = document.getElementById("modal2");																			// modal#
			
			// Get the image and insert it inside the modal - use its "alt" text as a caption
			var img = document.getElementById("img2");																				// img#
			var modalImg = document.getElementById("img22");																		// img##
			var captionText = document.getElementById("caption");

			img.onclick = function()
			{
			  modal.style.display = "block";
			  modalImg.src = this.src;
			  captionText.innerHTML = this.alt;
			}
			
			// Get the <span> element that closes the modal
			var span = document.getElementsByClassName("close2")[0];															// close#
			
			// When the user clicks on <span> (x), close the modal
			span.onclick = function()
			{ 
				modal.style.display = "none";
			}
			</script>
			<figcaption>
			Current example output
			</figcaption>
		</figure>
	</div>

	<div class="frame-terminal">
		<figure class="right">
			<img id="img3" src="../images/screenshots/002_button/button_04_term.png" alt="Current example terminal output" /> 					<!-- img#, filename -->

			<!-- Modal for terminal shot -->
			<div id="modal3" class="modal">																												<!-- modal# -->
				<span class="close3">&times;</span>																										<!-- close# -->
				<img class="modal-content" id="img33" />																									<!-- img## -->
				<div id="caption"></div>
			</div>
			
			<script>
			// Get the modal
			var modal = document.getElementById("modal3");																							// modal#
			
			// Get the image and insert it inside the modal - use its "alt" text as a caption
			var img = document.getElementById("img3");																								// img#
			var modalImg = document.getElementById("img33");																						// img##
			var captionText = document.getElementById("caption");

			img.onclick = function()
			{
			  modal.style.display = "block";
			  modalImg.src = this.src;
			  captionText.innerHTML = this.alt;
			}
			
			// Get the <span> element that closes the modal
			var span = document.getElementsByClassName("close3")[0];																				// close#
			
			// When the user clicks on <span> (x), close the modal
			span.onclick = function()
			{ 
				modal.style.display = "none";
			}
			</script>

			<figcaption>
				Current example terminal output (click for enlarged view)
			</figcaption>
		</figure>
	</div>

	<div class="frame-footer">																																<!-- filename (below)-->
		The code file for this example is available <a href="https://github.com/rontarrant/gtkd_demos/blob/master/002_button/button_04_oop_arg.d" target="_blank">here</a>.
	</div>
</div>

<p>Here’s the second version of this class:</p>

<div class="language-d highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="k">class</span> <span class="n">MyButton</span> <span class="p">:</span> <span class="n">Button</span>
<span class="p">{</span>
	<span class="nb">string</span> <span class="n">labelText</span> <span class="p">=</span> <span class="s">"Click this"</span><span class="p">;</span>

	<span class="k">this</span><span class="p">()</span>
	<span class="p">{</span>
		<span class="nb">string</span> <span class="n">message</span> <span class="p">=</span> <span class="s">"Next time, don't bring the Wookie."</span><span class="p">;</span>
		
		<span class="k">super</span><span class="p">(</span><span class="n">labelText</span><span class="p">);</span>
		<span class="c1">//addOnClicked(delegate void(Button b) { buttonAction(message); });</span>
		<span class="n">addOnClicked</span><span class="p">(</span><span class="k">delegate</span> <span class="kt">void</span><span class="p">(</span><span class="n">_</span><span class="p">)</span> <span class="p">{</span> <span class="n">buttonAction</span><span class="p">(</span><span class="n">message</span><span class="p">);</span> <span class="p">});</span>
		
	<span class="p">}</span> <span class="c1">// this()</span>
	

	<span class="kt">void</span> <span class="n">buttonAction</span><span class="p">(</span><span class="nb">string</span> <span class="n">message</span><span class="p">)</span>
	<span class="p">{</span>
		<span class="n">writeln</span><span class="p">(</span><span class="s">"The message is: "</span><span class="p">,</span> <span class="n">message</span><span class="p">);</span>
		
	<span class="p">}</span> <span class="c1">// buttonAction()</span>
	
<span class="p">}</span> <span class="c1">// class MyButton</span>
</code></pre></div></div>

<p>You’ll notice the signal hook-up is different this time around. Even though we’re in scope, we need to use a delegate so we can pass an argument along to <code class="language-plaintext highlighter-rouge">buttonAction()</code>. Also note that there’s another way of phrasing this hook-up and it’s commented out so as not to confuse things. But either way will work. The second way uses an underscore as a placeholder of sorts. It’s effectively saying: pass the originator along as a first argument and the compiler is smart enough to figure out that, in this case, the originator is a <em>GTK</em> <code class="language-plaintext highlighter-rouge">Button</code>.</p>

<p>And everything else should be obvious. (If not, <a href="mailto:gtkdcoding@gmail.com">email</a> me.)</p>

<p>And that’s it for this time. Next time we’ll look at how to open a window of a specific size. Until then, happy D-coding and may the widgets be with you.</p>

<div class="blog-nav">
	<div style="float: left;">
		<a href="./0003-add-a-button.html">Previous: Add a Button</a>
	</div>
	<div style="float: right;">
		<a href="./0005-window-size.html">Next: Size a Window</a>
	</div>
</div>
<p>
	<h3></h3>
<div class="inpage-frame">
	<a href="https://github.com/sponsors/rontarrant">
		<BR>
		<BR>
		<B>Is this article useful? Educational? Entertaining, perhaps?</B>
		<BR>
		<figure class="left">
			<img src="../images/favorite_32.png" alt="Sponsorship heart" style="width: 32px; height: 32px;">
		</figure>
		You're free to accept or decline this invitation to become our newest sponsor.
	</a>
</div>
	<h4 class="comment-blurb"><B>Comments? Questions? Observations?</B></h4>
	<p>
		Did we miss a tidbit of information that would make this post even more informative? Let's talk about it in the comments.
	</p>
	<script src="https://utteranc.es/client.js"
		repo="rontarrant"
		issue-term="pathname"
		theme="github-light"
		crossorigin="anonymous"
		async>
	</script>
	<ul>
		<li> come on over to the <a href="https://forum.dlang.org/">D Language Forum</a> and look for one of the <i>gtkDcoding</i> announcement posts, </li>
		<li> drop by <a href="https://forum.gtkd.org/">the <i>GtkD Forum</i></a>,</li>
		<li> follow the link below to email me, or</li>
		<li> go to the	<a href="https://www.facebook.com">gtkDcoding Facebook page.</a></li>
	</ul>
</p>
<p> You can also subscribe <a href="/feed.xml">via RSS</a> so you won't miss anything. Thank you very much for dropping by.</p>
<p>&copy; Copyright 2025 Ron Tarrant </p>
</div>

	<a class="u-url" href="./0004-oop-button.html" hidden></a>
</article>

      </div>
    </main><footer class="site-footer h-card">
  <data class="u-url" href="/"></data>

  <div class="wrapper">

    <h2 class="footer-heading">gtkDcoding</h2>

    <div class="footer-col-wrapper">
      <div class="footer-col footer-col-1">
        <ul class="contact-list">
          <li class="p-name">Ron Tarrant</li><li><a class="u-email" href="mailto:gtkDcoding@gmail.com">gtkDcoding@gmail.com</a></li></ul>
      </div>

      <div class="footer-col footer-col-2"><ul class="social-media-list"><li><a href="https://github.com/rontarrant"><svg class="svg-icon"><use xlink:href="../assets/minima-social-icons.svg#github"></use></svg> <span class="username">rontarrant</span></a></li></ul>
</div>

      <div class="footer-col footer-col-3">
        <p>Simple examples of how to use GtkD to build GUI applications.</p>
      </div>
    </div>

  </div>

</footer>
</body>

</html>
